<template>
  <div class="all-rel">
    <div class="all-flex-center-between all-top-handle">
      <el-button size="small" @click="clearFilter">重置所有筛选</el-button>
    </div>
    <div class="all-flow-table-box">
      <el-table ref="myTable" :data="list" border stripe>
        <el-table-column sortable align="center" prop="masterID" label="用户id" width="100"></el-table-column>
        <el-table-column align="center" prop="trueName" label="真实姓名" width="100"></el-table-column>
        <el-table-column align="center" prop="mobile" label="手机号" width="120"></el-table-column>
        <el-table-column align="center" prop="type" label="用户身份" width="120"
          :filters="[{text: '管理员', value: 0}, {text: '代理商', value: 1}, {text: '供应商', value: 2}]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.type == 0">管理员</span>
            <span v-else-if="scope.row.type == 1">代理商</span>
            <span v-else-if="scope.row.type == 2">供应商</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="statusText" label="用户状态" width="120"
          :filters="[{text: '已启用', value: '已启用'}, {text: '未启用', value: '未启用'}]"
          :filter-method="filterHandler"
        ></el-table-column>
        <el-table-column align="left" prop="address" label="详细地址"></el-table-column>
        <el-table-column align="left" label="操作" width="390">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index)">编辑</el-button>
            <el-button size="mini"
                       :type="scope.row.status == 1 ? 'warning' : 'success'"
                       @click="handleState(scope.$index, scope.row)"
                       v-if="scope.row.status == 1">禁用</el-button>
            <el-button size="mini"
                       :type="scope.row.status == 1 ? 'warning' : 'success'"
                       @click="handleState(scope.$index, scope.row)"
                       v-else>启用</el-button>
            <el-button size="mini" v-if="scope.row.type == 1 && scope.row.there == 0" @click="handleContact(scope.row)">关联用户</el-button>
            <el-button size="mini" v-if="scope.row.type == 1" @click="$router.push('/storer/account-list?id=' + scope.row.masterID);">结算列表</el-button>
            <el-button size="mini" type="primary" v-if="scope.row.type == 1" @click="handleAccount(scope.row, scope.$index)">结算</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="all-pagination">
      <el-pagination background layout="prev, pager, next" :total="count" :page-size="size" @current-change="currentPage"></el-pagination>
    </div>
    <div class="all-flex-center black-pop" v-show="popShow">
      <div class="all-flex-center account">
        <el-form status-icon :model="acountInfo" ref="form" label-width="110px" :rules="rules">
          <p class="title">结算打款</p>
          <el-form-item label="可结算金额">
            <el-input :disabled="true" :value="list[acountIndex] ? list[acountIndex].yesMoney : ''"></el-input>
          </el-form-item>
          <el-form-item label="冻结金额">
            <el-input :disabled="true" :value="list[acountIndex] ? list[acountIndex].noMoney : ''"></el-input>
          </el-form-item>
          <el-form-item label="需要结算金额" prop="deductionMoney">
            <el-input v-model="acountInfo.deductionMoney"></el-input>
          </el-form-item>
          <el-form-item label="实际打款金额" prop="reminMoney">
            <el-input v-model="acountInfo.reminMoney"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="note">
            <el-input type="textarea" v-model="acountInfo.note"></el-input>
          </el-form-item>
          <el-form-item class="all-handle-btn-box">
            <el-button type="primary" @click="handleCertain(acountInfo)">确定</el-button>
            <el-button @click="popShow = false">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      size: 10,
      count: 0,
      list: [],
      acountIndex: '',
      acountInfo: {},
      popShow: false,
      rules: {
        deductionMoney: {required: true, message: '需要结算金额不能为空', trigger: 'change'},
        reminMoney: {required: true, message: '实际结算金额不能为空', trigger: 'change'},
      }
    };
  },
  methods: {
    clearFilter() {
      this.$refs.myTable.clearFilter();
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    getList(page, size) {
      let _this = this;
      this.$ajax({
        url: 'master/getMasterList',
        data: {
          app: {
            page: page,
            size: size === undefined ? this.size : size,
          }
        },
        perfect(con) {
          _this.list = con.list;
          _this.count = con.count;
        },
        success(res) {
          if (res.data.code !== 1) {
            _this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }
      });
    },
    handleEdit(index) {
      window.sessionStorage.masterData = JSON.stringify(this.list[index]);
      this.$router.push("/storer/edit");
    },
    handleState(index, row) {
      let _this = this;
      let text = row.status === 1 ? "禁用" : "启用"
      this.$confirm("确定要" + text + "么？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$ajax({
          url: 'master/recycle',
          data: {
            app:{
              masterID: row.masterID,
              status: row.status === 1 ? 0 : 1
            }
          },
          success(res) {
            if (res.data.code === 1) {
              _this.$message({
                message: res.data.msg,
                type: 'success',
                onClose(){
                  _this.$router.go(0);
                }
              });
            } else {
              _this.$message({
                message: res.data.msg,
                type: 'warning'
              });
            }
          }
        });
      }).catch(() => {});
    },
    handleContact(row) {
      let _this = this;
      this.$prompt('请输入需要关联的用户id', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\d+$/,
        inputErrorMessage: '用户id只能为数字且不能为空,'
      }).then(({ value }) => {
        this.$ajax({
          url: "user/associatedAccount",
          data: {
            app: {
              userID: value,
              masterID: row.masterID
            }
          },
          success(res) {
            if (res.data.code === 1) {
              _this.$message({
                message: res.data.msg,
                type: 'success',
                onClose(){
                  _this.$router.go(0);
                }
              });
            } else {
              _this.$message({
                message: res.data.msg,
                type: 'warning'
              });
            }
          }
        });

      }).catch(() => {});
    },
    currentPage(page) {
      this.getList(page);
    },
    handleCertain(info) {
      let _this = this;
      this.$refs.form.validate(bool => {
        if (bool) {
          this.$confirm("确定要保存么?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            //修改提交
            this.$ajax({
              url:'master/getAgentMoney',
              data: {
                app: info
              },
              success(res) {
                if (res.data.code === 1) {
                  _this.$message({
                    message: res.data.msg,
                    type: 'success',
                    onClose(){
                      _this.$router.go(0);
                    }
                  });
                } else {
                  _this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  });
                }
              }
            });
          }).catch(() => {});
        }
      });
    },
    handleAccount(row, index) {
      this.popShow = true;
      this.acountIndex = index;
      this.acountInfo.masterID = row.masterID;
    }
  },
  created(){
    this.getList(1);
  }
};
</script>
<style scoped>
.black-pop {
  position: fixed;
  top: 0;
  left: 0; 
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
.account {
  width: 800px;
  height: 500px;
  background: #fff;
  border-radius: 5px;
}
.el-form {
  width: 70%;
  margin: 0 auto;
}
.title {
  margin: 20px 0;
  font-size: 20px;
  text-align: center;
}
</style>
